<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
    <!--导入引擎模板-->
    <script src="js/mui.min.js"></script>
	<script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="js/art-template.js"></script>
</head>
<body>
	<ul class="mui-table-view"> 
        <li class="mui-table-view-cell mui-collapse">
            <a class="mui-navigate-right" href="#">面板1</a>
            <div class="mui-collapse-content">
                <p>面板1子内容</p>
            </div>
        </li>
    </ul>
<div id="content"></div>
    <!--定义模板-->
     <script id="test" type="text/html">
         <h1><%=title%></h1>
         <ul>
             <%for (var i =0;i<list.length;i++){%>
                 <li>索引<%=i+1%>:<%=list[i]%></li>
             <% } %>
         </ul>
     </script>

  <!--定义对象-->
    <script>
        var data ={
            title:"artTemplate",
            isTemplate:"true",
            list:['读书', '听歌', '摄影', '旅行', '跑步', '爬山', '骑行']
        };
//        调用模板引擎提供的方法
     /*   参数1：模板的id
        参数2：对象（注意是  对象）*/
        var html = template('test',data);
        //找到并替换
        document.getElementById('content').innerHTML = html;
    </script>

	</body>
</html>
